<template>
    <div class="min-h-screen">
      <!-- 轮播图 -->
      <section class="relative h-[400px] md:h-[500px] overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-900/90 to-blue-700/80 z-10"></div>
        <img
          src="https://picsum.photos/id/20/1920/1080"
          alt="Bookstore banner"
          class="absolute inset-0 w-full h-full object-cover"
        />
        <div class="relative z-20 container mx-auto px-4 h-full flex flex-col justify-center">
          <div class="max-w-xl">
            <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4 leading-tight">
              发现阅读的乐趣
            </h1>
            <p class="text-lg md:text-xl text-blue-100 mb-6">
              探索我们精选的数千本图书，找到你的下一本最爱。
            </p>
            <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
              <router-link
                to="/books"
                class="bg-white hover:bg-gray-100 text-blue-700 font-medium py-3 px-6 rounded-lg transition-colors duration-200 text-center"
              >
                浏览全部图书
              </router-link>
              <router-link
                to="/books?category=编程"
                class="bg-transparent border-2 border-white hover:bg-white/10 text-white font-medium py-3 px-6 rounded-lg transition-colors duration-200 text-center"
              >
                编程图书
              </router-link>
            </div>
          </div>
        </div>
      </section>
      
      <!-- 特色分类 -->
      <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
          <h2 class="text-2xl md:text-3xl font-bold text-gray-800 mb-8 text-center">特色分类</h2>
          <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <router-link
              to="/books?category=编程"
              class="relative h-40 rounded-lg overflow-hidden group"
            >
              <img
                src="https://picsum.photos/id/24/400/600"
                alt="编程"
                class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
              <div class="absolute bottom-0 left-0 right-0 p-4">
                <h3 class="text-white font-medium">编程</h3>
                <p class="text-sm text-blue-100">探索最新技术</p>
              </div>
            </router-link>
            <router-link
              to="/books?category=文学"
              class="relative h-40 rounded-lg overflow-hidden group"
            >
              <img
                src="https://picsum.photos/id/32/400/600"
                alt="文学"
                class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
              <div class="absolute bottom-0 left-0 right-0 p-4">
                <h3 class="text-white font-medium">文学</h3>
                <p class="text-sm text-blue-100">经典与现代</p>
              </div>
            </router-link>
            <router-link
              to="/books?category=科幻"
              class="relative h-40 rounded-lg overflow-hidden group"
            >
              <img
                src="https://picsum.photos/id/35/400/600"
                alt="科幻"
                class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
              <div class="absolute bottom-0 left-0 right-0 p-4">
                <h3 class="text-white font-medium">科幻</h3>
                <p class="text-sm text-blue-100">探索未来世界</p>
              </div>
            </router-link>
            <router-link
              to="/books?category=历史"
              class="relative h-40 rounded-lg overflow-hidden group"
            >
              <img
                src="https://picsum.photos/id/37/400/600"
                alt="历史"
                class="absolute inset-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-110"
              />
              <div class="absolute inset-0 bg-gradient-to-t from-black/70 via-black/40 to-transparent"></div>
              <div class="absolute bottom-0 left-0 right-0 p-4">
                <h3 class="text-white font-medium">历史</h3>
                <p class="text-sm text-blue-100">了解过去，预见未来</p>
              </div>
            </router-link>
          </div>
        </div>
      </section>
      
      <!-- 畅销图书 -->
      <section class="py-12 bg-gray-50">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center mb-8">
            <h2 class="text-2xl md:text-3xl font-bold text-gray-800">畅销图书</h2>
            <router-link
              to="/books"
              class="text-blue-600 hover:text-blue-800 font-medium flex items-center"
            >
              查看全部 <i class="fa fa-arrow-right ml-1"></i>
            </router-link>
          </div>
          
          <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- 骨架屏 -->
            <div class="bg-white rounded-lg overflow-hidden shadow-md h-full flex flex-col">
              <div class="aspect-[2/3] bg-gray-200 animate-pulse"></div>
              <div class="p-4 flex-1 flex flex-col">
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mt-auto"></div>
              </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden shadow-md h-full flex flex-col">
              <div class="aspect-[2/3] bg-gray-200 animate-pulse"></div>
              <div class="p-4 flex-1 flex flex-col">
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mt-auto"></div>
              </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden shadow-md h-full flex flex-col">
              <div class="aspect-[2/3] bg-gray-200 animate-pulse"></div>
              <div class="p-4 flex-1 flex flex-col">
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mt-auto"></div>
              </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden shadow-md h-full flex flex-col">
              <div class="aspect-[2/3] bg-gray-200 animate-pulse"></div>
              <div class="p-4 flex-1 flex flex-col">
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mt-auto"></div>
              </div>
            </div>
          </div>
          
          <div v-else class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            <BookCard v-for="book in popularBooks" :key="book.id" :book="book" />
          </div>
        </div>
      </section>
      
      <!-- 新书上架 -->
      <section class="py-12 bg-white">
        <div class="container mx-auto px-4">
          <div class="flex justify-between items-center mb-8">
            <h2 class="text-2xl md:text-3xl font-bold text-gray-800">新书上架</h2>
            <router-link
              to="/books"
              class="text-blue-600 hover:text-blue-800 font-medium flex items-center"
            >
              查看全部 <i class="fa fa-arrow-right ml-1"></i>
            </router-link>
          </div>
          
          <div v-if="isLoading" class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <!-- 骨架屏 -->
            <div class="bg-white rounded-lg overflow-hidden shadow-md h-full flex flex-col">
              <div class="aspect-[2/3] bg-gray-200 animate-pulse"></div>
              <div class="p-4 flex-1 flex flex-col">
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mt-auto"></div>
              </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden shadow-md h-full flex flex-col">
              <div class="aspect-[2/3] bg-gray-200 animate-pulse"></div>
              <div class="p-4 flex-1 flex flex-col">
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mt-auto"></div>
              </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden shadow-md h-full flex flex-col">
              <div class="aspect-[2/3] bg-gray-200 animate-pulse"></div>
              <div class="p-4 flex-1 flex flex-col">
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mt-auto"></div>
              </div>
            </div>
            <div class="bg-white rounded-lg overflow-hidden shadow-md h-full flex flex-col">
              <div class="aspect-[2/3] bg-gray-200 animate-pulse"></div>
              <div class="p-4 flex-1 flex flex-col">
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-3 bg-gray-200 rounded animate-pulse mb-4"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mb-2"></div>
                <div class="h-4 bg-gray-200 rounded animate-pulse mt-auto"></div>
              </div>
            </div>
          </div>
          
          <div v-else class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
            <BookCard v-for="book in newBooks" :key="book.id" :book="book" />
          </div>
        </div>
      </section>
      
      <!-- 促销横幅 -->
      <section class="py-16 bg-gradient-to-r from-blue-600 to-blue-800 text-white">
        <div class="container mx-auto px-4 text-center">
          <h2 class="text-3xl md:text-4xl font-bold mb-4">限时优惠</h2>
          <p class="text-xl mb-8">全场图书8折起，使用优惠码 <span class="font-bold bg-white text-blue-700 px-2 py-1 rounded">SAVE20</span> 额外享受9折</p>
          <router-link
            to="/books"
            class="inline-block bg-white text-blue-700 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition-colors"
          >
            立即选购
          </router-link>
        </div>
      </section>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue';
  import { getAllBooks, getRecommendedBooks } from '../services/bookService';
  import BookCard from '../components/BookCard.vue';
  
  // 状态
  const isLoading = ref(true);
  const error = ref(null);
  const popularBooks = ref([]);
  const newBooks = ref([]);
  
  // 获取图书数据
  const fetchBooks = async () => {
    try {
      isLoading.value = true;
      error.value = null;
      
      // 获取畅销图书
      const allBooks = await getAllBooks();
      // 假设评分高的是畅销图书
      popularBooks.value = [...allBooks].sort((a, b) => b.rating - a.rating).slice(0, 4);
      
      // 获取新书（这里简单模拟，实际应按出版日期排序）
      newBooks.value = [...allBooks].sort(() => 0.5 - Math.random()).slice(0, 4);
    } catch (err) {
      error.value = '获取图书数据失败，请稍后重试。';
      console.error(err);
    } finally {
      isLoading.value = false;
    }
  };
  
  // 初始化
  onMounted(() => {
    fetchBooks();
  });
  </script>
  
  <style scoped>
  </style>